<template>
  <div style="background-color: white">
    <div>
      <span style="font-size: 20px"> 新产品生产计划 --</span>
      <span style="font-size: 20px">{{ form.planningnumber }}</span>
      <span style="font-size: 50px; color: coral; float: right; margin: 3%">{{
        form.state
      }}</span>

      <br />
      <br />
      <span style="margin-right: 10px">创建人: 依旧 </span
      ><span style="margin-right: 10px"> 创建时间：{{ form.creationTime }}</span
      ><span style="margin-right: 10px">更新人:依旧 </span
      ><span style="margin-right: 10px">更新时间：2023-12-12</span>
      <br />
      <br />
      <br />
    </div>
    <div>
      <el-button>编辑</el-button>
      <el-button>删除</el-button>
      <el-button>启用</el-button>
      <el-button>禁用</el-button>
      <el-button>打印</el-button>
    </div>
    <br />

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="first">
        <div>
          <el-form :model="form.value" label-width="120px">
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="计划编号">
                    <!-- <el-input v-model="form.productid"></el-input> -->
                    <span>{{ form.planningnumber }}</span>
                  </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="计划名称">
                    <span>{{ form.planningname }}</span>
                    <!-- <el-input v-model="form.productname"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="来源类型">
                    <span>{{ form.sourcetype }}</span>
                    <!-- <el-input v-model="form.specification"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="订单编号">
                    <span>{{ form.ordernumber }}</span>
                    <!-- <el-input v-model="form.units"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="成品名称">
                    <span>{{ form.finishedname }}</span>
                    <!-- <el-input v-model="form.producttype"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="成品编号">
                    <span>{{ form.finishednumber }}</span>
                    <!-- <el-input v-model="form.productproperty"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="规格型号">
                    <span>{{ form.specificationversion }}</span>
                    <!-- <el-input v-model="form.classname"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="产品类型">
                    <span>{{ form.finishedtype }}</span>
                    <!-- <el-input v-model="form.state"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="单位">
                    <span>{{ form.unit }}</span>
                    <!-- <el-input v-model="form.periodofvalidity"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="计划数量">
                    <span>{{ form.planningcount }}</span>
                    <!-- <el-input v-model="form.numberday"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="计划开工时间">
                    <span>{{ form.starttime.substr(0, 10) }}</span>
                    <!-- <el-input v-model="form.inventoryceiling"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="计划完工时间">
                    <span>{{ form.timeofcompletion.substr(0, 10) }}</span>
                    <!-- <el-input v-model="form.stockfloor"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="需求日期">
                    <span>{{ form.demanddate.substr(0, 10) }}</span>
                    <!-- <el-input v-model="form.purchaseprice"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-form-item label="备注">
              <span>{{ form.remark }}</span>
              <!-- <el-input v-model="form.remark"></el-input> -->
            </el-form-item>
          </el-form>
        </div>
        <div>
          <p>附件</p>
          <p v-for="(a, index) in attachment" :key="index">{{ a.filepath }}</p>
        </div>
      </el-tab-pane>
      <el-tab-pane label="生产工单" name="second">
        <div v-if="workOrderdata.length>0">
          <el-table
          ref="multipleTableRef"
          :data="workOrderdata"
          style="width: 100%; margin:2%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="50">
            <template #default="scope">
              <el-butto>{{ scope.$index + 1 }}</el-butto>
            </template>
          </el-table-column>
          <el-table-column label="工单编号" property="workOrderNumber" width="170">
          </el-table-column>
          <el-table-column label="工单名称" property="workOrderName" width="150">
          </el-table-column>
          <el-table-column
            label="工单进度"
            property="workOrderSchedule"
            width="120"
          >
          </el-table-column>
          <el-table-column label="关联计划" property="relevanceExplain" width="120">
          </el-table-column>
          <el-table-column label="产品名称" property="productName" width="150">
          </el-table-column>
          <el-table-column label="产品编号" property="productNumber" width="150">
          </el-table-column>
          <el-table-column label="规格型号" property="specification" width="120">
          </el-table-column>
          <el-table-column label="单位" property="unit" width="120">
          </el-table-column>
          <el-table-column label="需求日期" property="demandDate" width="120">
            <template #default="scope">
              <span>{{ scope.row.demandDate.substr(0, 10) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划数量" property="explainNum" width="120">
          </el-table-column>

          <el-table-column label="计划开工时间"  width="120">
            <template #default="scope">
              <span>{{ scope.row.explainStartDate.substr(0, 10) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划完成时间"  width="120">
            <template #default="scope">
              <span>{{ scope.row.explainEndDate.substr(0, 10) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实际开工时间"  width="120">
            <template #default="scope">
              <span>{{ scope.row.practicalStartDate.substr(0, 10) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实际完成时间"  width="120">
            <template #default="scope">
              <span>{{ scope.row.practicalEndDate.substr(0, 10) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" property="state" width="120">
          </el-table-column>
        </el-table>
        </div>
        <div v-else>
           暂未分解
        </div>
      </el-tab-pane>
      <el-tab-pane label="BOM组成" name="third">
        <el-form :model="form.value" label-width="120px">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content ep-bg-purple">
                <el-form-item label="BoM编号">
                  <!-- <el-input v-model="form.productid"></el-input> -->
                  <span>{{ form.bomNumber }}</span>
                </el-form-item>
              </div></el-col
            >
            <el-col :span="12"
              ><div class="grid-content ep-bg-purple-light">
                <el-form-item label="BoM版本">
                  <span>{{ form.versionnumber }}</span>
                  <!-- <el-input v-model="form.productname"></el-input> -->
                </el-form-item>
              </div></el-col
            >
          </el-row>
        </el-form>
        <el-table
          ref="multipleTableRef"
          :data="BOMtableData"
          style="width: 100%; margin:2%"
          row-key="Id"
      border
      default-expand-all
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="70">
            <template #default="scope">
              <el-butto>{{ scope.$index + 1 }}</el-butto>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" property="productname" width="150">
          </el-table-column>
          <el-table-column label="产品编号" property="productid" width="172">
          </el-table-column>
          <el-table-column
            label="规格型号"
            property="specification"
            width="120"
          >
          </el-table-column>
          <el-table-column label="单位" property="units" width="120">
          </el-table-column>
          <el-table-column label="BOM编号" property="numberbom" width="150">
            <template #default="scope">
              <el-butto style="color: darkgoldenrod">{{
                scope.row.numberbom
              }}</el-butto>
            </template>
          </el-table-column>
          <el-table-column label="BOM版本" property="versionnumber" width="150">
          </el-table-column>
          <el-table-column label="使用量" property="usageamount" width="120">
          </el-table-column>
          <el-table-column label="使用比例" property="useratio" width="120">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="生产产品" name="fourth">
        <div v-if="ProducttableData.length>0">
          <el-table
          ref="multipleTableRef"
          :data="ProducttableData"
          style="width: 100%; margin:2%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="50">
            <template #default="scope">
              <el-butto>{{ scope.$index + 1 }}</el-butto>
            </template>
          </el-table-column>
          <el-table-column label="产品编号" property="productid" width="170">
          </el-table-column>
          <el-table-column label="产品名称" property="productname" width="150">
          </el-table-column>
          <el-table-column
            label="规格型号"
            property="specification"
            width="120"
          >
          </el-table-column>
          <el-table-column label="单位" property="units" width="120">
          </el-table-column>
          <el-table-column label="产品类型" property="producttype" width="150">
          </el-table-column>
          <el-table-column label="预计使用量" property="usageamount" width="150">
          </el-table-column>
          <el-table-column label="实现使用量" property="practicalUsageamount" width="120">
          </el-table-column>
        </el-table>
        </div>
        <div v-else>
          暂无产品数据
        </div>
      </el-tab-pane>
      <el-tab-pane label="物料明细" name="Material">
        <div v-if="MaterialtableData.length>0">
          <el-table
          ref="multipleTableRef"
          :data="MaterialtableData"
          style="width: 100%; margin:2%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="50">
            <template #default="scope">
              <el-butto>{{ scope.$index + 1 }}</el-butto>
            </template>
          </el-table-column>
          <el-table-column label="物料编号" property="materialnumber" width="172">
          </el-table-column>
          <el-table-column label="物料名称" property="name" width="150">
          </el-table-column>
          <el-table-column
            label="规格型号"
            property="specificationsversion"
            width="120"
          >
          </el-table-column>
          <el-table-column label="单位" property="units" width="120">
          </el-table-column>
          <el-table-column label="物料类型" property="materialtype" width="150">
          </el-table-column>
          <el-table-column label="预计使用量" property="usageamount" width="150">
          </el-table-column>
          <el-table-column label="实现使用量" property="practicalUsageamount" width="120">
          </el-table-column>
        </el-table>
        </div>
        <div v-else>
          暂无物料数据
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
    <script>
import { useRoute } from "vue-router";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { DetailsProductionPlanning } from "../../api/ProductionPlanning";
export default {
  setup() {
    const activeName = ref("first");

    const BOMtableData = ref([]);
    const MaterialtableData = ref([]);
    const ProducttableData = ref([]);
    const workOrderdata = ref([]);
    const form = ref({
      planningnumber: "",
      planningname: "",
      sourcetype: "",
      ordernumber: "",
      finishedname: "",
      finishednumber: "",
      specificationversion: "",
      finishedtype: "",
      unit: "",
      planningcount: 1,
      starttime: "",
      timeofcompletion: "",
      demanddate: "",
      remark: "",
      isDeleted: false,
      bomNumber: "",
      state: "",
      versionnumber: "",
    });
    const route = useRoute();
    const selectId = ref("");
    const Data = reactive({});
    const attachment = ref([]);
    const getData = () => {
      selectId.value = route.query.id;
      DetailsProductionPlanning(selectId.value).then((res) => {
        form.value = res.result;
        BOMtableData.value = res.result.materialProductChildren;
        MaterialtableData.value = res.result.materialChildren;
        ProducttableData.value = res.result.productChildren;
        workOrderdata.value = res.result.workOrderChildren;
        res.result.accessoryChildren.forEach((element) => {
          attachment.value.push({
            filepath: element.filepath,
          });
        });
      });
    };
    getData();
    return {
      BOMtableData,
      MaterialtableData,
      ProducttableData,
      workOrderdata,
      activeName,
      form,
      route,
      selectId,
      Data,
      attachment,
      getData,
    };
  },
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
    